<template>
  <div class="help-container" style="padding: 20px; max-width: 1400px; margin: 0 auto;">
    <!-- 页面标题 -->
    <el-card shadow="hover" style="margin-bottom: 20px; text-align: center; border-radius: 12px">
      <h1 style="margin: 0; color: #2c3e50; font-size: 28px">帮助文档</h1>
      <p style="color: #7f8c8d; font-size: 16px; margin: 10px 0 0;">
        欢迎使用offer多多岗位信息收集系统，以下是常见问题与使用指南。
      </p>
    </el-card>

    <!-- 主体内容：左侧目录 + 右侧文档 -->
    <el-row :gutter="20">
      <!-- 左侧目录 -->
      <el-col :span="6">
        <el-card shadow="hover" class="toc-card" style="height: 70vh; overflow-y: auto; border-radius: 12px">
          <template #header>
            <div style="font-weight: 600; color: #2c3e50">目录</div>
          </template>
          <ul class="toc-list">
            <li v-for="item in sections" :key="item.id" class="toc-item">
              <a
                :href="`#${item.id}`"
                @click.prevent="scrollToSection(item.id)"
                :class="{ active: activeSection === item.id }"
              >
                {{ item.title }}
              </a>
            </li>
          </ul>
        </el-card>
      </el-col>

      <!-- 右侧帮助内容 -->
      <el-col :span="18">
        <el-card shadow="hover" style="border-radius: 12px" id="help-content" ref="helpContentRef">
          <div v-for="section in sections" :key="section.id" :id="section.id" class="help-section">
            <h2 style="color: #2c3e50; border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-bottom: 20px">
              {{ section.title }}
            </h2>
            <div v-html="section.content" style="line-height: 1.8; color: #34495e; font-size: 15px"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

// 帮助文档内容结构
const sections = [
  {
    id: 'introduction',
    title: '1. 系统简介',
    content: `
      <p>offer系统是一款专为大学生、应届生设计的信息化平台，支持学生投递管理、状态标记与数据统计。</p>
      <p>主要功能包括：<br>
        • 企业岗位信息收集<br>
        • 学生投递记录<br>
        • 多维度筛选查询<br>
        • AI 一键优化简历<br>
      </p>
    `
  },
  {
    id: 'search',
    title: '2. 如何搜索岗位',
    content: `
      <p>在【校招、实习】页面，您可以通过以下条件组合查询：</p>
      <ul style="padding-left: 20px">
        <li><strong>公司名称</strong>：输入关键词模糊匹配</li>
        <li><strong>岗位名称</strong>：输入关键词模糊匹配</li>
        <li><strong>工作地点</strong>：可输入城市或“全国”</li>
        <li><strong>最低学历</strong>：下拉选择，精准匹配</li>
        <li><strong>招聘对象</strong>：下拉选择，2026表示2026届应届生</li>
        <li><strong>公司类型</strong>：下拉选择</li>
        <li><strong>招聘类型</strong>：下拉选择</li>
        <li><strong>投递状态</strong>：下拉选择</li>
      </ul>
      <p>点击【查询】按钮触发搜索，【重置】可清空所有条件。</p>
    `
  },
  {
    id: 'deliver',
    title: '3. 如何投递岗位',
    content: `
      <p>步骤如下：</p>
      <ol style="padding-left: 20px">
        <li>在列表找到目标企业</li>
        <li>点击【投递】按钮</li>
        <li>系统将跳转至企业招聘页面</li>
        <li>按企业要求完成简历提交</li>
        <li>完成后，回到列表手动标记投递状态</li>
      </ol>
      <p><strong>注意：</strong> 投递状态不是系统自动更新，而是自行手动更新，起一个标记作用，本系统只负责岗位信息收集整理，跟企业没有对接，没有关系。</p>
    `
  },
  {
    id: 'faq',
    title: '4. 常见问题 (FAQ)',
    content: `
      <p><strong>Q：为什么搜索不到某些公司？</strong><br>
      A：可能是企业尚未发布岗位，或是本系统未来得及更新，或关键词不匹配，建议尝试模糊搜索或清除条件，多多关注网站信息。</p>

      <p><strong>Q：投递后状态不更新怎么办？</strong><br>
      A：状态由自己手动更新，只是起一个标记作用，便于筛选岗位。</p>

      <p><strong>Q：如何查看招聘公告？</strong><br>
      A：点击岗位行内的【公告】按钮即可查看企业发布的详细信息。</p>

      <p><strong>Q：购买vip后还是查询不了？</strong><br>
      A：等待3-5分钟，仍然不行，在个人中心页面进行反馈，请提交支付截图（需要有单号），耐心等待客服处理。</p>
    `
  }
]

// 当前激活的目录项
const activeSection = ref('introduction')

// 滚动到指定区域
const helpContentRef = ref(null)
const scrollToSection = (id) => {
  const el = document.getElementById(id)
  if (el) {
    const offsetTop = el.offsetTop - 100 // 减去头部偏移
    window.scrollTo({
      top: offsetTop,
      behavior: 'smooth'
    })
    activeSection.value = id
  }
}

// 监听滚动，更新左侧目录高亮
const handleScroll = () => {
  const scrollPosition = window.scrollY + 100
  for (const section of sections) {
    const el = document.getElementById(section.id)
    if (el) {
      const top = el.offsetTop
      const height = el.offsetHeight
      if (scrollPosition >= top && scrollPosition < top + height) {
        activeSection.value = section.id
        break
      }
    }
  }
}

// 绑定滚动事件
onMounted(() => {
  window.addEventListener('scroll', handleScroll)
  // 初始化高亮
  handleScroll()
})

// 组件卸载时移除事件监听
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style scoped>
.help-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc-item a {
  display: block;
  padding: 8px 12px;
  color: #34495e;
  text-decoration: none;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.2s;
}

.toc-item a:hover {
  background-color: #ecf0f1;
  color: #2980b9;
}

.toc-item a.active {
  background-color: #3498db;
  color: white;
  font-weight: 500;
}

.help-section {
  scroll-margin-top: 100px; /* 配合平滑滚动，防止标题被遮挡 */
}

/* 表格样式增强 */
.help-section table {
  margin: 20px 0;
}

.help-section th, .help-section td {
  padding: 10px;
  text-align: left;
}
</style>